import React, { useEffect, useState } from 'react'
import axios from 'axios';
import { Table } from 'antd';
//1. 导入类型
import type {HeroList} from './Hero';

export default function AxiosCom() {
  let instance = axios.create();
  //拦截器
  instance.interceptors.response.use(response => {
    // 将响应体结果 作为成功的结果值
    return response.data;
  })
  //声明一个函数 获取英雄数据
  let getHeros = () => {
    //2. any         HeroList axios请求成功结果值的类型
    return instance.get<any, HeroList>('http://api.xiaohigh.com/heros');
  }

  //使用 useEffect
  useEffect(() => {
    async function main() {
      let data = await getHeros();// 
      //保存数组数据
      setHeros(data);// 
    }
    main();
  }, [])

  //1. 数据                       3. 设置状态变量 heros 的类型
  let [heros, setHeros] = useState<HeroList>([]);


  //2. 结构
  let columns = [
    {
      title: '名字',
      dataIndex: 'name'
    },
    {
      title: '类型',
      dataIndex: 'type'
    }
  ];

  return (
    <Table 
      rowKey='id'
      dataSource={heros}  
      columns={columns} />
  )
}
